<template>
	<view>
		<template v-if="searchList.length === 0">
			<view class="py-2 font-md px-2">搜索历史</view>
			<view class="flex flex-wrap">
				<view class="border mx-2 my-2 px-2 rounded " v-for="(item,index) in list" :key="index"
					hover-class="bg-light" @click="clickSearchHistory(item)">
					{{item}}
				</view>
			</view>
		</template>

		<template v-else>
			<block v-for="(item,index) in searchList" :key="index">
				<hot-list :item="item" :index="index"></hot-list>
			</block>
		</template>
	</view>
</template>

<script>
	//模拟服务器数据 
	const demo = [
		{
			cover:"../../static/tabbar/jjy3.jpg",
			title:"话题名称1",
			desc:"话题描述1",
			news_count:100,
			today_count:20
		},
		{
			cover:"../../static/tabbar/jjy2.jpg",
			title:"话题名称2",
			desc:"话题描述2",
			news_count:101,
			today_count:21
		},
		{
			cover:"../../static/tabbar/微信图片_20240418093242.jpg",
			title:"话题名称3",
			desc:"话题描述3",
			news_count:102,
			today_count:22
		},
		{
			cover:"../../static/tabbar/微信图片_20240418090252.jpg",
			title:"话题名称4",
			desc:"话题描述4",
			news_count:103,
			today_count:23
		},
		{
			cover:"../../static/tabbar/jjy3.jpg",
			title:"话题名称5",
			desc:"话题描述5",
			news_count:104,
			today_count:24
		}
	]
	let courses = ["History", "Physics", "Mathematics", "Biology", "Chemistry"];
	let coursesInChinese = ["历史", "物理", "数学", "生物", "化学"];

	import hotList from "../../components/news/hot-list.vue"
	export default {
		components: {
			hotList
		},
		data() {
			return {
				searchText: '', //用户输入的字符串 （用户想搜什么）
				list: [...courses, ...coursesInChinese], //模拟数据 将来自数据库中记录的搜索历史 柔和到一起
				searchList: [] //将服务器端数据放到本地的 数组
			};
		},
		methods: {
			//点击搜索历史
			clickSearchHistory(text) {
				this.searchText = text
				this.searchEvent()
			},
			//搜索逻辑
			searchEvent() {

				//加载搜索状态 
				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				//请求搜索   半成品  后台处理 搜索结果 例如使用SpringBoot 
				setTimeout(() => {
					this.searchList = demo
					//隐藏加载状态
					uni.hideLoading()
				}, 2000)
			}

		},
		//监听导航栏输入内容
		onNavigationBarSearchInputChanged(e) {
			//console.log(e.text);
			this.searchText = e.text
		},
		//监听导航栏的搜索按钮
		onNavigationBarButtonTap(e) {
			//console.log(e);
			//如果说判定点到 搜索 按钮上
			if (e.index === 0) {
				//执行搜索逻辑
				this.searchEvent()
			}
		}
	}
</script>

<style lang="scss">

</style>